import { View, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import { AtButton, AtCard, AtMessage } from "taro-ui";
import { getAddressById } from "../../../../api/address";
import orderImg from "../../../../image/order.png";
import { ImageUrl } from "../../../../utils/request";
import "./index.scss";
import { confirmReceipt } from "../../../../api/order";
type createOrderType = {
  ownder: number;
  allPrice: number;
  goodsList: GoodsListType[];
  addressId: number;
  remark: string;
};

type GoodsListType = {
  num: number;
  price: number;
  goodsId: number;
  stockId: number;
  goodsName: string;
  picture: string;
};

export default (props: createOrderType) => {
  const [detailMsg, SetDetailMsg] = useState<string>();
  const [status, SetStatus] = useState<string>();
  useEffect(() => {
    console.log(props);

    getAddressById(props.addressId).then(resp => {
      SetDetailMsg(resp.detailedAddress);
    });

    const s = props.orderStatus;
    switch (s) {
      case 1:
        SetStatus("支付失败");
        break;
      case 2:
        SetStatus("支付成功，等待商家接单");
        break;
      case 3:
        SetStatus("商家接单");
        break;
      case 4:
        SetStatus("出库中");
        break;
      case 5:
        SetStatus("出库成功");
        break;
      case 6:
        SetStatus("出库失败");
        break;
      case 7:
        SetStatus("骑手接单成功");
        break;
      case 8:
        SetStatus("骑手配送中");
        break;
      case 9:
        SetStatus("配送成功");
        break;
      case 10:
        SetStatus("订单失败");
        break;
      case 11:
        SetStatus("配货中");
        break;
      case 12:
        SetStatus("骑手未接单");
        break;
      case 13:
        SetStatus("订单完成");
        break;
    }
  }, []);

  return (
    <View className="card_wrapper">
      <AtMessage></AtMessage>
      {detailMsg && (
        <AtCard
          title={"送至：" + detailMsg}
          note={status}
          extra={dayjs(props.createTime).format("YYYY-MM-DD")}
          thumb={orderImg}
          onClick={() => {
            Taro.setStorageSync("orderDetail", JSON.stringify(props));
            Taro.setStorageSync("detailMsg", JSON.stringify(detailMsg));

            Taro.navigateTo({
              url: "/pages/order_detail/index"
            });
          }}
        >
          <View style={{ height: "auto" }} className="at-row at-row--wrap">
            {props.goodsList.map(item => {
              return (
                <View className="at-col at-col-3">
                  <Image
                    className="order_image"
                    src={ImageUrl + item.picture}
                  ></Image>
                </View>
              );
            })}
          </View>
          {props.orderStatus == 9 && (
            <View>
              <View style={{ width: "30%", margin: "10px auto" }}>
                <AtButton
                  type="primary"
                  size="small"
                  onClick={event => {
                    event.stopPropagation();
                    confirmReceipt(props.orderId).then(() => {
                      Taro.atMessage({
                        message: "收货成功",
                        type: "success"
                      });
                      props.initData();
                    });
                  }}
                >
                  确认收货
                </AtButton>
              </View>
            </View>
          )}
        </AtCard>
      )}
    </View>
  );
};
